<template>
	<view>
		<view class="row-center">
			<view class="item" style="margin-top: 20rpx;" >
				<view class="col-center " v-for="item,index in list" @click="goItem(item)">
						<image :src="'/static/images/admin_'+index+'.png'" class="img"></image>
						<view class="text">{{item.name}}</view>
				</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="key">数据统计</view>
		<view class="count">
			<view class="count-title">商家数量</view>
			<view class="row-between-center" style="margin-top: 30rpx;">
				<view class="left col-center-start">
					<view class="count-key">
						认证通过
					</view>
					<view class="count-value">200</view>
				</view>
				<view class="left col-center-start" >
					<view class="count-key">
						待审核
					</view>
					<view class="count-value">200</view>
				</view>
			</view>
		</view>

		<view class="count">
			<view class="count-title">商家握手</view>
			<view class="row-between-center" style="margin-top: 30rpx;">
				<view class="left col-center-start">
					<view class="count-key">
						展示中的圈子
					</view>
					<view class="count-value">200</view>
				</view>
				<view class="left col-center-start" >
					<view class="count-key">
						已两两握手的商家
					</view>
					<view class="count-value">200</view>
				</view>
			</view>
		</view>
		
		<view class="count">
			<view class="count-title">运营商</view>
			<view class="row-between-center" style="margin-top: 30rpx;">
				<view class="other col-center">
					<view class="other-key">
						省级
					</view>
					<view class="other-value">200</view>
				</view>
				
				<view class="other col-center">
					<view class="other-key">
						省级
					</view>
					<view class="other-value">200</view>
				</view>
				
				<view class="other col-center">
					<view class="other-key">
						省级
					</view>
					<view class="other-value">200</view>
				</view>
				
				<view class="other col-center">
					<view class="other-key">
						省级
					</view>
					<view class="other-value">200</view>
				</view>
			</view>
		</view>
		
		<view class="count">
			<view class="count-title">活动数据</view>
			<view class="row-between-center" style="margin-top: 30rpx;">
				<view class="other col-center">
					<view class="other-key">
						待审核
					</view>
					<view class="other-value">200</view>
				</view>
				
				<view class="other col-center">
					<view class="other-key">
						进行中
					</view>
					<view class="other-value">200</view>
				</view>
				
				<view class="other col-center">
					<view class="other-key">
						已结束
					</view>
					<view class="other-value">200</view>
				</view>
				
				<view class="other col-center">
					<view class="other-key">
						报名人数
					</view>
					<view class="other-value">200</view>
				</view>
			</view>
		</view>
	<view style="height: 100rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{'name':'平台案例','path':'/src/pages/admin/examples'
					},
					{'name':'运营商','path':'/src/pages/admin/merchants_list'},
					{'name':'商家反馈','path':'/src/pages/admin/examples'},
					{'name':'商家认证审核','path':'/src/pages/admin/merchants_audit'},
					{'name':'商家关闭审核','path':'/src/pages/admin/examples'},
					{'name':'活动审核','path':'/src/pages/admin/examples'},
					{'name':'首页轮播图审核','path':'/src/pages/admin/examples'},
					{'name':'全国首页设置','path':'/src/pages/admin/examples'},
				]
			}
		},
		methods: {
			goItem(item){
				uni.navigateTo({
					url:item.path
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.item{
		display: grid;
		grid-template-columns: 140rpx 140rpx 140rpx 140rpx;
		grid-gap: 42rpx;
		.img{
			width: 100rpx;
			height: 100rpx;
		}
		.text{
			 white-space:nowrap;
			margin-top: 10rpx;
			color: #000;
			font-size: 22rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 40rpx; /* 181.818% */
		}
	}
	.line{
		margin-top: 20rpx;
		height: 1rpx;
		background: #E6E6E6;
	}
	.key{
		margin-top: 40rpx;
		margin-left: 20rpx;
		color: #1E2132;
		font-size: 32rpx;
		font-style: normal;
		font-weight: 500;
		line-height: 48rpx; /* 150% */
	}
	.count{
		margin: 20rpx;
		padding: 40rpx 30rpx ;
		border-radius: 32rpx;
		border: 2rpx solid #c5d0f2;
		background: #FFF;
		.count-title{
			color: #1E2132;
			font-size: 28rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 44rpx; /* 157.143% */
		}
		.left{
			padding-left: 30rpx;
			width: 280rpx;
			height: 190rpx;
			border-radius: 12rpx;
			background: linear-gradient(180deg, #EEF4FF 0%, #F7FAFF 100%);
		}
		.right{
				padding-left: 30rpx;
			width: 280rpx;
			height: 190rpx;
			border-radius: 12rpx;
			background: linear-gradient(180deg, #EBF9FF 0%, #F5FCFE 100%);
		}
		.count-key{
			
			color: #000;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 40rpx; /* 166.667% */
		}
		.count-value{
			margin-top: 20rpx;
			color: #000;
			font-family: D-DIN;
			font-size: 48rpx;
			font-style: normal;
			font-weight: 700;
			line-height: 48rpx; /* 100% */
		}
	}
	
	.other{
		width: 136rpx;
		height: 190rpx;
		border-radius: 12rpx;
		background: linear-gradient(180deg, #EFF2F6 0%, #FBFCFC 100%);
		.other-key{
			color: #000;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 40rpx; /* 166.667% */
		}
		.other-value{
			margin-top: 20rpx;
			color: #000;
			font-size: 40rpx;
			font-style: normal;
			font-weight: 700;
			line-height: 48rpx; /* 120% */
		}
	}
	
</style>
